<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="telephone=no" name="format-detection">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title>宣和艺网-共享艺术服务平台</title>
  <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/public.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/jquery.bxslider.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/css/mobile/style.css}" />
  <script type="text/javascript" th:src="@{/js/mobile/jquery1.11.3.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/jquery.bxslider.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/index.js}"></script>
  <script type="text/javascript" th:src="@{/js/mobile/redirectPc.js}"></script>
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?d554d2fe469092ab25a4245851a644f0";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>

</head>

<body>
  <!--手机搜索begin-->
  <div id="nav-search">

  </div>
  <div class="drawer-section search_div">
    <div class="search_con">
      <form action="" style="width: 100%;height: 100%;">
        <input name="names" type="text" class="input1" value="搜索" onFocus="if(value=='搜索'){value=''}"
          onBlur="if(value==''){value='搜索'}" />
        <input type="submit" value="" class="bnt1" />
      </form>
    </div>
  </div>
  <!--top-->
  <div id="top">
    <div class="wrap clearfloat">
      <div th:replace="~{mobile/component/header :: index_menu}"></div>

      <div class="topPhone clearfloat">

      </div>
    </div>
    <div class="muen1" style="right: 56px;"> <span class="muenX"></span> <span class="muenY">
        <img class="img1" th:src="@{/images/mobile/search_image.png}" />
      </span> <span class="muenZ"></span> </div>
    <div class="muen"> <span class="muenX"></span> <span class="muenY"></span> <span class="muenZ"></span> </div>
  </div>
  <!--/top-->

  <!--main-->
  <div class="main">
    <div class="banner">
      <ul class="slider1">
        <li> <a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}" /><img class="img2"
              th:src="@{/images/mobile/banner_wap.png}" /></a>
        </li>
        <li> <a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}" /><img class="img2"
              th:src="@{/images/mobile/banner_wap.png}" /></a>
        </li>
        <li> <a href=""><img class="img1" th:src="@{/images/mobile/banner_wap.png}" /><img class="img2"
              th:src="@{/images/mobile/banner_wap.png}" /></a>
        </li>
      </ul>
    </div>

    <script>
      $(document).ready(function () {
        // 给 class 为 packUp 的元素绑定点击事件
        $('#type-control').click(function () {
          // 切换 id 为 art-type-select 的元素的显示状态
          $('#art-type-select').toggle();
          // 根据显示状态修改按钮文本
          if ($('#art-type-select').is(':visible')) {
            $(this).text(' 收起▲ ');
          } else {
            $(this).text(' 展开▼ ');
          }
        });
      });

      $(document).ready(function () {
        // 给 class 为 packUp 的元素绑定点击事件
        $('#letter-control').click(function () {
          // 切换 id 为 art-type-select 的元素的显示状态
          $('#letter-type-select').toggle();
          // 根据显示状态修改按钮文本
          if ($('#letter-type-select').is(':visible')) {
            $(this).text(' 收起▲ ');
          } else {
            $(this).text(' 展开▼ ');
          }
        });
      });




    </script>


    <div class="about_bg3">
      <div class="aboutL">
        <!--<span class="BtnL"></span>-->
        <div class="aboutH">
          <h3>ARTIST CENTER</h3>
          <h2>艺术家列表</h2>
        </div>


      </div>
      <div style="clear: both;height: 0.5rem;">

      </div>
      <div class="encyclopedia-type">
        <div class="type-box">
          <div class="type-title">
            <span class="type-class">艺术类型：</span>
            <span class="packUp" id="type-control"> 收起▲ </span>
          </div>
          <div class="type-attribute" id="art-type-select" >
            <div class="type-attribute-box">
              <div style="width: 5.4rem;" th:class="${atype == null||atype == 'null'||atype == ''}? 'type-item selectItem type-item-art-type' : 'type-item type-item-art-type '" ><a th:href="@{/m/index/artist/list(fy=${fy})}"> 全部</a> </div>
              <div th:class="${atype == artType.typeId}? 'type-item selectItem type-item-art-type' : 'type-item type-item-art-type '" class="type-item type-item-art-type" th:each="artType:${artTypes}">
                <a th:href="@{/m/index/artist/list(fy=${fy},atype=${artType.typeId})}">
                [[${artType.name}]]
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="type-box">
          <div class="type-title">
            <span class="type-class">首字母搜索：</span>
            <span class="packUp" id="letter-control"> 收起▲ </span>
          </div>
          <div class="type-attribute" id="letter-type-select">
            <div class="type-attribute-box" style="width: 100%">
              <div style="width: 4.4rem !important;" th:class="${fy == null||fy == 'null'||fy == ''}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype})}">全部 </a></div>
              <div th:class="${fy == 'A'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='A')}"> A </a></div>
              <div th:class="${fy == 'B'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='B')}"> B </a></div>
              <div th:class="${fy == 'C'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='C')}"> C </a></div>
              <div th:class="${fy == 'D'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='D')}"> D </a></div>
              <div th:class="${fy == 'E'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='E')}"> E </a></div>
              <div th:class="${fy == 'F'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='F')}"> F </a></div>
              <div th:class="${fy == 'G'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='G')}"> G </a></div>
              <div th:class="${fy == 'H'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='H')}"> H </a></div>
              <div th:class="${fy == 'I'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='I')}"> I </a></div>
              <div th:class="${fy == 'J'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='J')}"> J </a></div>
              <div th:class="${fy == 'K'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='K')}"> K </a></div>
              <div th:class="${fy == 'L'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='L')}"> L </a></div>
              <div th:class="${fy == 'M'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='M')}"> M </a></div>
              <div th:class="${fy == 'N'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='N')}"> N </a></div>
              <div th:class="${fy == 'O'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='O')}"> O </a></div>
              <div th:class="${fy == 'P'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='P')}"> P </a></div>
              <div th:class="${fy == 'Q'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='Q')}"> Q </a></div>
              <div th:class="${fy == 'R'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='R')}"> R </a></div>
              <div th:class="${fy == 'S'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='S')}"> S </a></div>
              <div th:class="${fy == 'T'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='T')}"> T </a></div>
              <div th:class="${fy == 'U'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='U')}"> U </a></div>
              <div th:class="${fy == 'V'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='V')}"> V </a></div>
              <div th:class="${fy == 'W'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='W')}"> W </a></div>
              <div th:class="${fy == 'X'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='X')}"> X </a></div>
              <div th:class="${fy == 'Y'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='Y')}"> Y </a></div>
              <div th:class="${fy == 'Z'}? 'type-item selectItem type-item-letter' : 'type-item type-item-letter '" > <a th:href="@{/m/index/artist/list(atype=${atype},fy='Z')}"> Z </a></div>


            </div>
          </div>
        </div>
      </div>
      <div class="product_ul anim anim-1 anim-show">
        <aside class="fall-box grid">
          <div class="grid-item item" th:each="artist,index:${artists}">
            <a th:href="@{/m/artist(id=${artist.id})}" style="border: 1px solid #ccc;display: block;">
              <img th:src="${artist.url}" class="item-img" />
              <section class="section-p" style="border-top: 1px solid #eee;">
                <p class="title-p">[[ ${artist.name} ]]</p>
              </section>
            </a>
          </div>
        </aside>
      </div>
      <div class="pages anim anim-3 yema">
        <div>
          <a class="next" th:href="@{/artist/list(currentPage=${currentPage - 1},fy=${fy},atype=${atype},type=${1})}" th:if="${currentPage != 1}">
            &lt;&lt;
          </a>
          <div th:each="page:${pages}" style="display: inline;">
            <span class="current" th:text="${page}" th:if="${currentPage == page}">1</span>
            <a class="num" th:href="@{/artist/list(currentPage=${page}, type=${1},fy=${fy},atype=${atype})}" th:if="${currentPage != page}" th:text="${page}"></a>
          </div>
          <a class="next" th:href="@{/artist/list(currentPage=${currentPage + 1}, type=${1},fy=${fy},atype=${atype})}" th:if="${currentPage != totalPages}">
            &gt;&gt;
          </a>
        </div>
      </div>
    </div>

  </div>

  <!--/main-->

  <!--/main-->

  <!--footer-->
  <div th:replace="~{mobile/component/footer :: footer}"></div>
  <!--/footer-->

  <!--wap-->
  <div th:replace="~{mobile/component/footer :: footer_menu}"></div>
  <!--/wap-->

  <div class="wapBg"></div>
</body>
<script type="text/javascript">
  $('.slider1').bxSlider({
    'auto': true,
    'controls': true,
    'touchEnabled': true,
    'pager': true,
    'speed': 1000,
    'pause': 4000,

  })

  $('.sliderHomeSpT').bxSlider({
    'auto': false,
    'controls': true,
    'touchEnabled': true,
    'pager': true,

  })

  var lineW = $(".lineW span").width();
  $('.sliderHomeSpB').bxSlider({
    'auto': false,
    infiniteLoop: true,
    'controls': true,
    'touchEnabled': true,
    'pager': true,
    'slideWidth': '204',
    'minSlides': 2,
    'maxSlides': 5,
    'moveSlides': 5,
    onSlideAfter: function ($slideElement, oldIndex, newIndex) {
      var num = $(".homeSpBW .bx-pager .bx-pager-item").length;
      var lineWW = $(".lineW").width();


      if (newIndex == 0) {
        $(".lineW span").css({
          "width": lineW + 'px'
        })
      } else {
        $(".lineW span").css({
          "width": (lineWW / num) * (newIndex + 1) + 'px'
        })
      }

    },


  })

  $('.sliderHomeDzzc').bxSlider({
    'auto': true,
    'controls': true,
    'touchEnabled': true,
    'pager': false,
    'slideWidth': '280',
    'minSlides': 2,
    'maxSlides': 4,
    'moveSlides': 1,
    'speed': 600,
    //	    'slideMargin': 20
  })

</script>
<script th:src="@{/js/mobile/pb/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{/js/mobile/pb/masonry.pkgd.min.js}"></script>
<script th:src="@{/js/mobile/pb/masonry.pkgd.min.js}"></script>
<script th:src="@{/js/mobile/pb/swiper.min.js}"></script>
<script th:src="@{/js/mobile/pb/find.js}"></script>

</html>
